<template>
  <div v-loading="loading" class="content">
    <page-web v-if="isPC" :renderedComponents="renderedComponents"></page-web>
    <page-app v-else :renderedComponents="renderedComponents"></page-app>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Panles from '@/container/solution/importComponents'
import * as api from '@/const/api'

export default {
  title: '解决方案',
  name: 'Solution',
  components: {
    ...Panles,
  },
  data() {
    return {
      renderedComponents: [],
      loading: false,
    }
  },
  computed: {
    ...mapState(['isPC']),
  },
  watch: {
    '$route.query'(val) {
      if (val.id) {
        this.goPage(val.id)
      }
    },
  },
  mounted() {
    const { id } = this.$route.query
    this.goPage(id)
  },
  methods: {
    async goPage(id) {
      try {
        this.loading = true
        const { code, msg, data } = await this.$axios.$get(`${api.solutionContent}/${id}`)

        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }
        this.renderedComponents = JSON.parse(data.content)
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
